<script setup lang="ts">
import { type HeadList, MdPreview } from 'md-editor-v3'

export interface MdPreviewProps {
  data: string
  previewTheme?: 'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'
  codeTheme?:
    | 'atom'
    | 'a11y'
    | 'github'
    | 'gradient'
    | 'kimbie'
    | 'paraiso'
    | 'qtcreator'
    | 'stackoverflow'
}

export interface MdPreviewEvents {
  /**
   *  html 变化回调事件，用于获取预览 html 代码。
   */
  (e: 'htmlChanged', h: string): void
  /**
   *  动态获取markdown目录。
   */
  (e: 'getCatalog', list: HeadList[]): void
}

const props = withDefaults(defineProps<MdPreviewProps>(), {
  data: '',
  previewTheme: 'default',
  codeTheme: 'atom',
})
const emit = defineEmits<MdPreviewEvents>()

const isDark = useDark()
</script>

<template>
  <MdPreview
    v-bind="{
      ...props,
      theme: isDark ? 'dark' : 'light',
    }"
    :model-value="data"
    @html-changed="(h) => emit('htmlChanged', h)"
    @get-catalog="(list) => emit('getCatalog', list)"
  />
</template>

<style scoped></style>
